<template>
  <div class='m-courseCostList'>
    <!-- search -->
    <el-form class='m-courseCostList-form' :inline='true' label-width="80px">
      <el-form-item label='费用名称'>
        <el-input v-model.trim='name' placeholder="输入费用名称" />
      </el-form-item>
      <el-form-item>
        <el-button @click='clearSearch'>清空</el-button>
        <el-button @click='searchFun'>搜索</el-button>
        <el-button type='primary' @click='toDetail'>添加费用</el-button>
      </el-form-item>
    </el-form>
    <!-- table -->
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='240' slot='ahead'>
        <template slot-scope="scope">
          <div class='m-firmDepartment-table-handle'>
            <el-button size='mini' @click='toUpdate(scope.row)'>修改</el-button>
            <el-button size='mini' @click='deleteCourse(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
// import AttrSearch from '@/components/business/AttrSearch'

export default {
  name: 'm-courseCost',

  components: {
    // AttrSearch
  },

  data() {
    return {
      tableKeys: [
        { prop: 'name', label: '费用名称', minWidth: '150' },
        { prop: 'title', label: '费用特性', minWidth: '150' },
        { prop: 'price', label: '价格', minWidth: '100' }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      name: ''
    }
  },

  mounted() {
    this.$refs.page.changePage()
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    async fetchData(aPageNum, aPageSize) {
      const { name } = this
      const params = { aMerchantId: this.aFirmId, aPageNum, aPageSize, aGoodsType: 0 }
      if (name || name === 0) {
        params.aName = name
      }
      return this.$api.supplyGetMines(params)
    },

    getData(data) {
      this.data = data
    },

    clearSearch() {
      this.name = ''
      this.searchFun()
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    async deleteCourse(id) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该商品吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.supplyDelete({ aId: id })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    toUpdate({ id }) {
      this.routerPush('courseCostDetail', { query: { id, type: 'set' } })
      this.$router.push({ name: 'courseCostDetail', query: { id, type: 'set' } })
    },

    toDetail() {
      this.routerPush('courseCostAdd')
      this.$router.push({ name: 'courseCostAdd' })
    }
  }
}
</script>

<style lang='less'>
.m-courseCostList {
}
</style>